<script setup>
import MaterialCard from "@/components/MaterialCard.vue";
</script>

<template>
  <div id="overview" role="presentation">
    <!-- TODO: 每个Card拆分成独立的组件 -->
    <MaterialCard style="width: 360px">
      <p style="height: 240px">这里有个图表</p>
      <p>总共检测出 3939 次扫描，今天一共检测出 39 次</p>
    </MaterialCard>
    <MaterialCard style="width: 360px">
      <p style="height: 240px">这里有个地图</p>
      <p>扫描来源前三多的地区：[某地区]、[某地区]、[某地区]</p>
    </MaterialCard>
    <MaterialCard style="width: 360px">
      <p style="height: 240px">这里有个图表</p>
      <p>扫描类型前三多的类型：SYN扫描、ICMP扫描、UDP扫描</p>
    </MaterialCard>
  </div>
</template>

<style scoped>
#overview {
  display: flex;
  flex-wrap: wrap;
  padding: 16px;
}

#overview>* {
  margin: 16px;
}
</style>